<script setup lang="ts">
// 值--->父 --> 子组件


defineProps<{
  options:{
    label:string
    value:string | number
  }[]
  modelValue?:string |number
}>()


// @update
const emit = defineEmits<{
    (e:'update:modelValue' , value:string | number) :void
  }>()
// toggleItem

const  toggleItem = (value:string|number)=>{
  emit('update:modelValue',value)
}
</script>

<template>
  <div class="pk-radio-btn">
    <a v-for="item in options" :key="item.value" class="item" href="javascript:;" :class="{active:modelValue === item.value}" @click="toggleItem(item.value)">
      ★{{ item.label }}
    <!-- {{ item.value }} ---  {{  modelValue }} -->
    </a>

  </div>
</template>

<style lang="scss" scoped>
.pk-radio-btn {
  display: flex;
  flex-wrap: wrap;
  .item {
    height: 32px;
    min-width: 60px;
    line-height: 30px;
    padding: 0 14px;
    text-align: center;
    border: 1px solid var(--pk-bg);
    background-color: var(--pk-bg);
    margin-right: 10px;
    box-sizing: border-box;
    color: var(--pk-text2);
    margin-bottom: 10px;
    border-radius: 4px;
    transition: all 0.3s;
    &.active {
      border-color: var(--pk-primary);
      background-color: var(--pk-plain);
    }
  }
}
</style>